<html>
<head>
<meta charset="utf-8"/>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" name="viewport"/>
<meta content="telephone=no" name="format-detection"/>
<style type="text/css">

#watermark {

  position: relative;
  overflow: hidden;
}

#watermark .x {
  position: absolute;
  top: 800;
  left: 400;
  color: #3300ff;
  font-size: 50px;
  pointer-events: none;
  opacity:0.5;
  filter:Alpha(opacity=50);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
}
    </style>
<style type="text/css">
 html{color:#333;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-rendering:optimizelegibility;font-family:Helvetica Neue,PingFang SC,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif}html.borderbox *,html.borderbox :after,html.borderbox :before{box-sizing:border-box}article,aside,blockquote,body,button,code,dd,details,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:block}audio,canvas,video{display:inline-block}body,button,input,select,textarea{font:300 1em/1.8 PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,Helvetica,sans-serif}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}blockquote{position:relative;color:#999;font-weight:400;border-left:1px solid #1abc9c;padding-left:1em;margin:1em 3em 1em 2em}@media only screen and (max-width:640px){blockquote{margin:1em 0}}abbr,acronym{border-bottom:1px dotted;font-variant:normal}abbr{cursor:help}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}ol,ul{list-style:none}caption,th{text-align:left}q:after,q:before{content:""}sub,sup{font-size:75%;line-height:0;position:relative}:root sub,:root sup{vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a{color:#1abc9c}a:hover{text-decoration:underline}.typo a{border-bottom:1px solid #1abc9c}.typo a:hover{border-bottom-color:#555;color:#555}.typo a:hover,a,ins{text-decoration:none}.typo-u,u{text-decoration:underline}mark{background:#fffdd1;border-bottom:1px solid #ffedce;padding:2px;margin:0 5px}code,pre,pre tt{font-family:Courier,Courier New,monospace}pre{background:hsla(0,0%,97%,.7);border:1px solid #ddd;padding:1em 1.5em;display:block;-webkit-overflow-scrolling:touch}hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:.8em;height:10px}.typo-small,figcaption,small{font-size:.9em;color:#888}b,strong{font-weight:700;color:#000}[draggable]{cursor:move}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}.clearfix{zoom:1}.textwrap,.textwrap td,.textwrap th{word-wrap:break-word;word-break:break-all}.textwrap-table{table-layout:fixed}.serif{font-family:Palatino,Optima,Georgia,serif}.typo-dl,.typo-form,.typo-hr,.typo-ol,.typo-p,.typo-pre,.typo-table,.typo-ul,.typo dl,.typo form,.typo hr,.typo ol,.typo p,.typo pre,.typo table,.typo ul,blockquote{margin-bottom:1rem}h1,h2,h3,h4,h5,h6{font-family:PingFang SC,Helvetica Neue,Verdana,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;color:#000;line-height:1.35}.typo-h1,.typo-h2,.typo-h3,.typo-h4,.typo-h5,.typo-h6,.typo h1,.typo h2,.typo h3,.typo h4,.typo h5,.typo h6{margin-top:1.2em;margin-bottom:.6em;line-height:1.35}.typo-h1,.typo h1{font-size:2em}.typo-h2,.typo h2{font-size:1.8em}.typo-h3,.typo h3{font-size:1.6em}.typo-h4,.typo h4{font-size:1.4em}.typo-h5,.typo-h6,.typo h5,.typo h6{font-size:1.2em}.typo-ul,.typo ul{margin-left:1.3em;list-style:disc}.typo-ol,.typo ol{list-style:decimal;margin-left:1.9em}.typo-ol ol,.typo-ol ul,.typo-ul ol,.typo-ul ul,.typo li ol,.typo li ul{margin-bottom:.8em;margin-left:2em}.typo-ol ul,.typo-ul ul,.typo li ul{list-style:circle}.typo-table td,.typo-table th,.typo table caption,.typo table td,.typo table th{border:1px solid #ddd;padding:.5em 1em;color:#666}.typo-table th,.typo table th{background:#fbfbfb}.typo-table thead th,.typo table thead th{background:hsla(0,0%,95%,.7)}.typo table caption{border-bottom:none}.typo-input,.typo-textarea{-webkit-appearance:none;border-radius:0}.typo-em,.typo em,caption,legend{color:#000;font-weight:inherit}.typo-em{position:relative}.typo-em:after{position:absolute;top:.65em;left:0;width:100%;overflow:hidden;white-space:nowrap;content:"\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB\30FB"}.typo img{max-width:100%}.common-content{font-weight:400;color:#353535;line-height:1.75rem;white-space:normal;word-break:normal;font-size:1rem}.common-content img{display:block;max-width:100%;background-color:#eee}.common-content audio,.common-content video{width:100%;background-color:#eee}.common-content center,.common-content font{margin-top:1rem;display:inline-block}.common-content center{width:100%}.common-content pre{margin-top:1rem;padding-left:0;padding-right:0;position:relative;overflow:hidden}.common-content pre code{font-size:.8rem;font-family:Consolas,Liberation Mono,Menlo,monospace,Courier;display:block;width:100%;box-sizing:border-box;padding-left:1rem;padding-right:1rem;overflow-x:auto}.common-content hr{border:none;margin-top:1.5rem;margin-bottom:1.5rem;border-top:1px solid #f5f5f5;height:1px;background:none}.common-content b,.common-content h1,.common-content h2,.common-content h3,.common-content h4,.common-content h5,.common-content strong{font-weight:700}.common-content h1,.common-content h2{font-size:1.125rem;margin-bottom:.45rem}.common-content h3,.common-content h4,.common-content h5{font-size:1rem;margin-bottom:.45rem}.common-content p{font-weight:400;color:#353535;margin-top:.15rem}.common-content .orange{color:#ff5a05}.common-content .reference{font-size:1rem;color:#888}.custom-rich-content h1{margin-top:0;font-weight:400;font-size:15.25px;border-bottom:1px solid #eee;line-height:2.8}.custom-rich-content li,.custom-rich-content p{font-size:14px;color:#888;line-height:1.6}table.hljs-ln{margin-bottom:0;border-spacing:0;border-collapse:collapse}table.hljs-ln,table.hljs-ln tbody,table.hljs-ln td,table.hljs-ln tr{box-sizing:border-box}table.hljs-ln td{padding:0;border:0}table.hljs-ln td.hljs-ln-numbers{min-width:15px;color:rgba(27,31,35,.3);text-align:right;white-space:nowrap;cursor:pointer;user-select:none}table.hljs-ln td.hljs-ln-code,table.hljs-ln td.hljs-ln-numbers{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:12px;line-height:20px;vertical-align:top}table.hljs-ln td.hljs-ln-code{position:relative;padding-right:10px;padding-left:10px;overflow:visible;color:#24292e;word-wrap:normal;white-space:pre}video::-webkit-media-controls{overflow:hidden!important}video::-webkit-media-controls-enclosure{width:calc(100% + 32px);margin-left:auto}.button-cancel{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel,.button-primary{-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary{color:#fff;background-color:#ff5a05;border-radius:3px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot);src:url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.woff) format("woff"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.ttf) format("truetype"),url(//at.alicdn.com/t/font_372689_bwwwtosxtzp.svg#iconfont) format("svg")}@font-face{font-family:player-font;src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot);src:url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.eot#iefix) format("embedded-opentype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.woff) format("woff"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.ttf) format("truetype"),url(//at.alicdn.com/t/font_509397_1cyjv4o90qiod2t9.svg#player-font) format("svg")}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}html{background:#fff;min-height:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{width:100%}body.fixed{overflow:hidden;position:fixed;width:100vw;height:100vh}i{font-style:normal}a{word-wrap:break-word;-webkit-tap-highlight-color:rgba(0,0,0,0)}a:hover{text-decoration:none}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}.MathJax,.MathJax_CHTML,.MathJax_MathContainer,.MathJax_MathML,.MathJax_PHTML,.MathJax_PlainSource,.MathJax_SVG{outline:0}.ios-app-switch .js-audit{display:none}._loading_wrap_{position:fixed;width:100vw;height:100vh;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999}._loading_div_class_,._loading_wrap_{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}._loading_div_class_{word-wrap:break-word;padding:.5rem .75rem;text-align:center;z-index:9999;font-size:.6rem;max-width:60%;color:#fff;border-radius:.25rem;-ms-flex-direction:column;flex-direction:column}._loading_div_class_ .message{color:#353535;font-size:16px;line-height:3}.spinner{animation:circle-rotator 1.4s linear infinite}.spinner *{line-height:0;box-sizing:border-box}@keyframes circle-rotator{0%{transform:rotate(0deg)}to{transform:rotate(270deg)}}.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:circle-dash 1.4s ease-in-out infinite,circle-colors 5.6s ease-in-out infinite}@keyframes circle-colors{0%{stroke:#ff5a05}to{stroke:#ff5a05}}@keyframes circle-dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}to{stroke-dashoffset:187;transform:rotate(450deg)}}.confirm-box-wrapper,.confirm-box-wrapper .mask{position:absolute;top:0;left:0;right:0;bottom:0}.confirm-box-wrapper .mask{background:rgba(0,0,0,.6)}.confirm-box-wrapper .confirm-box{position:fixed;top:50%;left:50%;width:267px;background:#fff;transform:translate(-50%,-50%);border-radius:7px}.confirm-box-wrapper .confirm-box .head{margin:0 18px;font-size:18px;text-align:center;line-height:65px;border-bottom:1px solid #d9d9d9}.confirm-box-wrapper .confirm-box .body{padding:18px;padding-bottom:0;color:#353535;font-size:12.5px;max-height:150px;overflow:auto}.confirm-box-wrapper .confirm-box .foot{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;padding:18px}.confirm-box-wrapper .confirm-box .foot .button-cancel{border:1px solid #d9d9d9}.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}




    </style>
<style type="text/css">
        .button-cancel[data-v-87ffcada]{color:#888;border:1px solid #888;border-radius:3px;margin-right:12px}.button-cancel[data-v-87ffcada],.button-primary[data-v-87ffcada]{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;height:35px;display:inline-block;font-size:15px;text-align:center;line-height:36px}.button-primary[data-v-87ffcada]{color:#fff;background-color:#ff5a05;border-radius:3px}.pd[data-v-87ffcada]{padding-left:1.375rem;padding-right:1.375rem}.article[data-v-87ffcada]{max-width:70rem;margin:0 auto}.article .article-unavailable[data-v-87ffcada]{color:#fa8919;font-size:15px;font-weight:600;line-height:24px;border-radius:5px;padding:12px;background-color:#f6f7fb;margin-top:20px}.article .article-unavailable .iconfont[data-v-87ffcada]{font-size:12px}.article .main[data-v-87ffcada]{padding:1.25rem 0;margin-bottom:52px}.article-title[data-v-87ffcada]{color:#353535;font-weight:400;line-height:1.65rem;font-size:1.34375rem}.article-info[data-v-87ffcada]{color:#888;font-size:.9375rem;margin-top:1.0625rem}.article-content[data-v-87ffcada]{margin-top:1.0625rem}.article-content.android video[data-v-87ffcada]::-webkit-media-controls-fullscreen-button{display:none}.copyright[data-v-87ffcada]{color:#b2b2b2;padding-bottom:20px;margin-top:20px;font-size:13px}.audio-player[data-v-87ffcada]{width:100%;margin:20px 0}.to-comment[data-v-87ffcada]{overflow:hidden;padding-top:10px;margin-bottom:-30px}.to-comment a.button-primary[data-v-87ffcada]{float:right;height:20px;font-size:12px;line-height:20px;padding:4px 8px;cursor:pointer}.article-comments[data-v-87ffcada]{margin-top:2rem}.article-comments h2[data-v-87ffcada]{text-align:center;color:#888;position:relative;z-index:1;margin-bottom:1rem}.article-comments h2[data-v-87ffcada]:before{border-top:1px dotted #888;content:"";position:absolute;top:56%;left:0;width:100%;z-index:-1}.article-comments h2 span[data-v-87ffcada]{font-size:15.25px;font-weight:400;padding:0 1rem;background:#fff;display:inline-block}.article-sub-bottom[data-v-87ffcada]{z-index:10;cursor:pointer}.switch-btns[data-v-87ffcada]{height:76px;cursor:pointer;padding-top:24px;padding-bottom:24px;border-bottom:10px solid #f6f7fb;position:relative}.switch-btns[data-v-87ffcada]:before{content:" ";height:1px;background:#e8e8e8;position:absolute;top:0;left:0;-webkit-box-sizing:border-box;box-sizing:border-box;left:1.375rem;right:1.375rem}.switch-btns .btn[data-v-87ffcada]{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.switch-btns .btn .tag[data-v-87ffcada]{-webkit-box-flex:0;-ms-flex:0 0 62px;flex:0 0 62px;text-align:center;color:#888;font-size:14px;border-radius:10px;height:22px;line-height:22px;background:#f6f7fb;font-weight:400}.switch-btns .btn .txt[data-v-87ffcada]{margin-left:10px;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;color:#888;font-size:15px;height:22px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}@media (max-width:769px){.article .breadcrumb[data-v-87ffcada]{padding-top:10px;padding-bottom:10px}}





    </style>
<style type="text/css">
        .comment-item{list-style-position:inside;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;margin-bottom:1rem}.comment-item a{border-bottom:none}.comment-item .avatar{width:2.625rem;height:2.625rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%}.comment-item .info{margin-left:.5rem;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.comment-item .info .hd{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .username{color:#888;font-size:15.25px;font-weight:400;line-height:1.2}.comment-item .info .hd .control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.comment-item .info .hd .control .btn-share{color:#888;font-size:.75rem;margin-right:1rem}.comment-item .info .hd .control .btn-praise{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:15.25px;text-decoration:none}.comment-item .info .hd .control .btn-praise i{color:#888;display:inline-block;font-size:.75rem;margin-right:.3rem;margin-top:-.01rem}.comment-item .info .hd .control .btn-praise i.on,.comment-item .info .hd .control .btn-praise span{color:#ff5a05}.comment-item .info .bd{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all;line-height:1.6}.comment-item .info .time{color:#888;font-size:9px;line-height:1}.comment-item .info .reply .reply-hd{font-size:15.25px}.comment-item .info .reply .reply-hd span{margin-left:-12px;color:#888;font-weight:400}.comment-item .info .reply .reply-hd i{color:#ff5a05;font-size:15.25px}.comment-item .info .reply .reply-content{color:#353535;font-size:15.25px;font-weight:400;white-space:normal;word-break:break-all}.comment-item .info .reply .reply-time{color:#888;font-size:9px}




    </style>
</head>
<body>
<div id="app">
<div class="article" data-v-87ffcada="" id="watermark">

<div class="main main-app" data-v-87ffcada="">
<h1 class="article-title pd" data-v-87ffcada="">
                21讲你不知道的工作区快捷键
            </h1>
<div class="article-content typo common-content pd" data-v-87ffcada=""><img data-v-87ffcada="" src="https://static001.geekbang.org/resource/image/2f/4c/2f2e83930b8895e62188f01c06bc384c.jpg"/>
<div class="" data-v-87ffcada="" id="article-content">
<div class="text">
<p>在整个工作区这个部分，我们已经一一讲解了 VS Code 工作区内的各个组件，同时也介绍了每个组件里常用的快捷键。但是我们介绍的快捷键还只是工作区使用的一小部分，那今天让我们一起来看下，在工作区中还有哪些有用的快捷键，能够提升我们日常编辑器操作的效率。</p><h2>编辑器操作</h2><p>首先我要介绍的就是<strong>编辑器的快捷操作</strong>。我们在专栏的第一部分主要介绍了<strong>编辑器内的命令</strong>，但在工作区部分我们并没有对编辑器的操作作过太多介绍。原因主要是：我觉得 VS Code 的编辑器的组织方式，还是相对比较常见的，没有什么特别难的地方，相信你可以轻松使用。不过，要提到编辑器相关的操作，这个就比较复杂了。那它复杂在哪里呢？</p><h3>横向编辑器组</h3><p>编辑器的管理方式，可以说是 VS Code 一直在变化的部分。最开始的时候，VS Code 并不支持 Tab，同时你最多只能在工作区横向创建三个编辑器，比如下图：</p><p><img alt="" src="https://static001.geekbang.org/resource/image/9a/ae/9adfbf6a44deb2ccb006084fa8b326ae.png"/></p><center><span class="reference">三编辑器</span></center><p>并且在每个单独的编辑器里，你也只能看到当前打开的这个文档，而没有 Tab，所以你看不到在这个编辑器里打开过但是暂时隐藏起来的文件。</p><p>至于如何创建出多个编辑器（最多三个），你只需要按下快捷键“Cmd + \”（Windows 上是 Ctrl + \），或者从命令面板里搜寻 “拆分编辑器” （Split Editor）并运行即可实现。</p><!-- [[[read_end]]] --><p><img alt="" src="https://static001.geekbang.org/resource/image/2a/b5/2a8ba938357a5e2fd251e54f193453b5.gif"/></p><center><span class="reference">拆分编辑器</span></center><p>虽然没有 Tab 的功能，但其实每个编辑器依然记录了在这个编辑器中曾经被打开的文件。所以 VS Code 把每个编辑器，称作<strong>编辑器组（Editor Group）</strong>。同时，VS Code 还提供了能在这几个编辑器组里进行快速跳转的快捷键，你可以按下 “Cmd + 1”“Cmd + 2”和“Cmd + 3”（Windows 上是 Ctrl+1，Ctrl+2，Ctrl+3）分别在这三个编辑器组里跳转。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/e3/6e/e35d9fcc007822f6b466c6850da6af6e.gif"/></p><center><span class="reference">编辑器快速跳转</span></center><h3>纵向编辑器组</h3><p>这之后 VS Code 就收到了非常多的反馈，很多用户希望能够把编辑器组进行纵向的布局。所以你可以使用命令 “切换垂直/水平编辑器布局” （Flip Editor Group Layout）或者按下“Cmd + Option + 0”（Windows 上是 Shift + Alt + 0）来进行布局方向的切换了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/63/89/6332112043b2b2c51c76b9e30ccebe89.gif"/></p><center><span class="reference">切换编辑器布局</span></center><p>另外，在纵向布局的情况下，上面提到的跳转编辑器组的快捷键也依然会生效。</p><h3>Tab</h3><p>下一个呼声非常高的编辑器相关的需求，我想就是 Tab 的支持了。VS Code 虽然一直以来技术上是支持 Tab 的，但是并不会显示出来，而是要求你按下“Cmd + P”（Windows 上是 Ctrl + P）打开命令面板来进行文件的切换。但是 Tab 的呼声真的非常高，于是很快 VS Code 就把这个功能加上了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/47/41/4789f9892e86837e65e2ed0784362441.png"/></p><center><span class="reference">编辑器中的 Tab 支持</span></center><p>所以，我想对于 Tab ，就并不需要过多的介绍了。不过，还是不得不提以下几个跟 Tab 相关的快捷键。</p><p>比如，在 Tab 之间进行跳转。你可以使用命令 “打开上/下一个编辑器”（Open Previous/Next Editor）或者按下 “Cmd + Option + 左/右方向键”（Windows 上是 Ctrl + Pagedown/Pageup）在编辑器 Tab 之间进行跳转。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/db/95/db5d0ebdb5893c8d4aae0470616bb195.gif"/></p><center><span class="reference">上一个编辑器、下一个编辑器命令</span></center><p>要注意的是，这个命令会依次打开每个编辑器组里的每个 Tab。但是如果你只希望在某个编辑器组里进行跳转的话，那么你就需要另一个命令 “打开组中的下一个编辑器”（Open Next Editor in Group）。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/83/ed/83600137c6b174b6c21064c68c4778ed.gif"/></p><center><span class="reference">编辑器组内跳转</span></center><h3>移动编辑器 Tab</h3><p>除了将鼠标聚焦到其他编辑器组里，VS Code 还允许我们把当前的编辑器 Tab 移动到其他编辑器组当中去。比如我们可以使用命令 “将编辑器移动到下一组”（Move Editor into Next Group），将当前的 Tab 移动到下一个编辑器组中。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/40/ee/406d22f5317ad98e31b2a925a914c7ee.gif"/></p><center><span class="reference">将编辑器移动到下一个编辑器组中</span></center><p>类似的命令还有，“将编辑器移动到上一组”（Move Editor into Previous Group）等。</p><h2>Grid 网格布局</h2><p>到这里你应该已经发现了，VS Code 对编辑器的布局，已经逐渐变得越来越宽松了。特别是最近的几个版本里已经支持了网格布局，也就是说，<span class="orange">编辑器组不再拘泥于横向或者纵向布局了</span>。这里，你可以先试着运行命令 “2 x 2 网格编辑器布局”[Grid Editor Layout（2 x 2）]。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/e5/36/e56f873f8ed44b10f20e21fb1812e436.gif"/></p><center><span class="reference">编辑器网格布局</span></center><p>一旦变成了网格布局，毋庸置疑，VS Code 肯定会添加命令让我们能跳转到当前编辑器上方、下方、左侧和右侧的“编辑器”。比如在下图中，我就使用了 “聚焦到上方编辑器组”（Focus Above Editor Group），然后鼠标就移动到了最上面的那个编辑器，其他的几个命令也是类似的。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/0c/65/0c969b8facdbf04486c24f1b1b09da65.gif"/></p><center><span class="reference">聚焦到上方的编辑器</span></center><p>有了网格系统，VS Code 编辑器组的布局就相对比较灵活了。<span class="orange">你可以在编辑器的分界处按下鼠标左键进行上下或左右拖拽，就可以改变编辑器的大小了。</span></p><p><img alt="" src="https://static001.geekbang.org/resource/image/b1/d2/b1e660d692702031455fd34d63ff16d2.gif"/></p><center><span class="reference">编辑器网格布局大小调整</span></center><p>当然如果你的网格不止是 2 x 2 的话，那使用鼠标进行操作还是非常灵活的。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/63/fc/63494aa4e82ca264a5e30a927aa008fc.png"/></p><center><span class="reference">编辑器网格布局</span></center><p><img alt="" src="https://static001.geekbang.org/resource/image/41/6d/41246f40e798ce4349420bb06608bc6d.gif"/></p><center><span class="reference">编辑器网格布局大小调整</span></center><h2>拖拽 Drag &amp; Drop</h2><p>到这里，你应该对 VS Code 里编辑器布局的变化历史已经很熟悉了。随着布局的逐渐灵活，可以使用的命令也越来越多了，从最基础的聚焦下一个编辑器组和移动编辑器，到更灵活地在网格布局里聚焦编辑器，要想都记住它们并且绑定合适的快捷键，真的是太难了。<span class="orange">对此我有两个建议。</span></p><p>第一，虽然网格系统很强大，但是不意味着它一定就是高效的或者说适合自己的。就我自己而言，我通常只会使用左、右两个编辑器组，并且只需要熟悉几个快捷键就行了。</p><p>第二，就是使用鼠标。VS Code 有很不错的拖拽功能。比如你可以在编辑器组中对 Tab 进行拖拽，把它放到你想要的位置。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/35/e1/3522122456ae6896e3f37460d924c6e1.gif"/></p><center><span class="reference">编辑器拖拽</span></center><p>从上面的动图中你可以看到，在我们移动鼠标时，VS Code 会把释放鼠标后编辑器将会放置的位置显示了出来，十分直观。</p><p>除了拖拽编辑器 Tab 以外，我们还可以从资源管理器里对文件进行拖拽；</p><p><img alt="" src="https://static001.geekbang.org/resource/image/70/9b/70286fffda60db4e40c9f3a9a6b2219b.gif"/></p><center><span class="reference">从资源管理器中将文件拖拽入编辑器</span></center><p>同样的，从系统资源管理器里我们也能够把文件直接拖入 VS Code 中打开。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/89/98/891e856d5d247ab774b28b6d1e385e98.gif"/></p><center><span class="reference">从系统资源管理器将文件拖拽入编辑器</span></center><p>有了鼠标的拖拽功能，我们就能够从容应对 VS Code 相对灵活的布局系统了。</p><h2>专注模式</h2><p>我们在工作的时候，有时候希望更专注于代码编辑器，而不希望被 VS Code 的其他组件，比如视图或者面板所打扰。或者我们在比较小的屏幕上工作，比如说笔记本，有时候也有类似的需求，视图和面板等都太占屏幕面积了。对于这样的需求，VS Code 有几个非常实用的快捷键。</p><p>首先，我们可以按下 Cmd + B （Windows 上是 Ctrl + B）打开或者关闭整个视图；</p><p><img alt="" src="https://static001.geekbang.org/resource/image/f9/de/f92fb77a0713d58632eaf694193775de.gif"/></p><center><span class="reference">隐藏侧边栏</span></center><p>也可以按下 Cmd + J （Windows 上是 Ctrl + J）来打开或者关闭面板。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/a1/fa/a11ef18b7d6252fe17f9c3f50af336fa.gif"/></p><center><span class="reference">隐藏面板</span></center><p>如果我们不希望看到最左侧的活动栏，或者最下面的状态栏，也可以通过命令 “切换活动栏可见性”（Toggle Activity Bar Visibility）和 “切换状态栏可见性”（Toggle Status Bar Visibility）来一键开关。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/3f/dc/3f8a0e10d5559f599128ab2df481d1dc.gif"/></p><center><span class="reference">隐藏活动栏和状态栏</span></center><p>除了可以使用上面介绍的这几种快捷键去分别打开、隐藏不同的组件以外，VS Code 还提供了一个禅模式，通过运行 “切换禅模式”(Toggle Zen Mode)，就可以把侧边栏、面板等全部隐藏。进入禅模式后，只需按下 Escape 键，即可退出禅模式。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/c0/56/c06c36ab25286b58c7bcc880cf43ef56.gif"/></p><center><span class="reference">禅模式</span></center><p>看到这里你可能会问，“这几个操作，都是为小屏幕做了很好的优化，但如果说我的屏幕特别大，VS Code 有什么好的优化没有？”</p><p>有！你可以执行 “切换居中布局”（Toggle Centered Layout），将编辑器放在 VS Code 工作区的正中间，同时你还可以通过拉动编辑器两边的边框，调整编辑器的宽度。如此一来，当你使用大屏幕时，就不用担心编辑器里的代码，都“缩”在屏幕的左上角了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/25/78/2531366b53ef5647adc1b17cb7fde378.gif"/></p><center><span class="reference">编辑器居中模式</span></center><p>有了上面这几个快捷键，当你在需要专注于某个代码的时候，就可以只显示编辑器了，比如下图：</p><p><img alt="" src="https://static001.geekbang.org/resource/image/52/e0/52ab63868d8d4d3145c84cc86d4eb8e0.png"/></p><center><span class="reference">单编辑器且居中</span></center><p>而当你需要使用其他组件时，比如集成终端，你只需按下 Ctrl  + ` ，就可以将其调出了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/d6/50/d6f7125e0a693c9b2b8c48a4b462b150.gif"/></p><center><span class="reference">唤出集成终端</span></center><p>不管怎样，我个人还是更喜欢把编辑器配置得简洁一些，然后每次只专注于一个任务。当然喜欢或习惯并行操作的同学，可能就会更喜欢使用网格系统。这个因人或因任务而异吧。</p><h2>缩放</h2><p>缩放功能也是我在日常工作中经常使用的。比如我自己配置的字体比较小，而当需要给其他同事展示代码的时候，就往往需要把字体调大以便于更好地展示，这时候我就会按下“Cmd +/-”（Windows 上是 Ctrl +/-）来缩放整个工作区。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/f7/97/f7d4812c7d6d6494a5259f4c1302bf97.gif"/></p><center><span class="reference">编辑器缩放</span></center><p>而如果我希望一键将缩放调整为默认设置，就可以执行命令 “重置缩放”（reset zoom）。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/2c/8d/2ccbebdb52cebe31443d265ba0f26c8d.gif"/></p><center><span class="reference">重置编辑器缩放</span></center><h2>小结</h2><p>这就是关于工作区的常用的快捷键了（也可参考下面的汇总表），通过它们我们能够更好地管理我们的工作台界面，以满足我们不同工作场景下的需求，从而也让 “工作台” 这个名字，更名副其实。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/11/8c/1111c17d45a16da352a5b71f05c6d18c.png"/></p><center><span class="reference">工作区常用快捷键汇总</span></center><p>而在今天的文章中，我并没有介绍跟某个特定视图、面板相关的命令，相信你已经知道了如何去找到它们，前面文章我们讲解过的。不过这里我再多啰嗦一句，如果你想搜索某个组件相关的命令，你可以打开命令面板，搜索名字，然后就能够看到跟这个组件相关的命令了。</p><p><img alt="" src="https://static001.geekbang.org/resource/image/03/56/03ad8259176b4689ca0ebbd17337c456.gif"/></p><center><span class="reference">搜索组件相关命令</span></center><p>总之，VS Code 的界面定制、快捷键、各个组件的功能，给我们提供的选项非常多，但这不意味着我们必须要掌握全部的内容。重要的还是找到适合自己的那几个配置和快捷键，优化自己日常工作的流程，那就足够了。也欢迎你在评论区留言，分享你的学习或使用心得。</p><hr/><p><img alt="" src="https://static001.geekbang.org/resource/image/92/06/92862660523add24b3168f22954fa506.jpg"/></p>
</div>
</div>
</div>
<div class="article-comments pd" data-v-87ffcada=""><h2 data-v-87ffcada=""><span data-v-87ffcada="">精选留言</span></h2>
<ul data-v-87ffcada="">
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/0f/56/1a/abb7bfe3.jpg"/>
<div class="info">
<div class="hd"><span class="username">cylim</span>
</div>
<div class="bd">周志敏<br/>我的做法是CMD + P打开后马上 CMD + S存储，这样就不是斜体了。可以再打开其他文件。 <br/></div>
<span class="time">2018-10-31 11:33</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/c5/37/bb5465cf.jpg"/>
<div class="info">
<div class="hd"><span class="username">冰山北极熊</span>
</div>
<div class="bd">老师，救命啊，我把编辑器放在最中间之后，怎么撤销呢？现在无法回到默认的位置了 <br/></div>
<span class="time">2018-11-03 11:56</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/0f/d0/f2/237b6d1d.jpg"/>
<div class="info">
<div class="hd"><span class="username">周志敏</span>
</div>
<div class="bd">Cmd+p 打开一个文件，tab 上文件名是斜体的，这时候我再 Cmd+p 打开另外一个文件，新打开的文件不会新建一个tab、而是覆盖掉老的。<br/>这个极其不方便，有没有什么办法可以用 Cmd+p连续打开多个文件？ <br/></div>
<span class="time">2018-10-30 11:25</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/10/85/c7/5347b551.jpg"/>
<div class="info">
<div class="hd"><span class="username">free</span>
</div>
<div class="bd">切换垂直/水平布局快捷键应该是Shift+Alt+0 <br/></div>
<span class="time">2018-11-20 23:40</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/10/54/70/b88e530f.jpg"/>
<div class="info">
<div class="hd"><span class="username">Jm丶</span>
</div>
<div class="bd">我是从emacs转过来的，想知道vs code 是否支持类似emacsC-x C-f（counsel-find-file） 打开系统内任意位置的文件这一功能呢？ <br/></div>
<span class="time">2018-10-31 19:11</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/12/c5/66/cc3a4b06.jpg"/>
<div class="info">
<div class="hd"><span class="username">简单生活</span>
</div>
<div class="bd">问个问题，在tasks.json里设置了 <br/> "command": "g++",<br/>            "args": [<br/>                "-I C:/eosio/eos/contracts",<br/>                "test1.cpp"<br/>            ],<br/>运行 build(ctrl+shift+B) 总是提示 No such file or file not found. 但是在terminal 上运行 g++ -I ... 就能找到，请问怎么回事<br/> <br/></div>
<span class="time">2018-10-31 13:35</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/11/7e/97/746261a8.jpg"/>
<div class="info">
<div class="hd"><span class="username">Cody Yang</span>
</div>
<div class="bd">拖拽功能这么好用，是不是有计划做 VS Code for iPad 呀？ <br/></div>
<span class="time">2018-10-30 10:20</span>
</div>
</li>
<li class="comment-item" data-v-87ffcada=""><img class="avatar" src="https://static001.geekbang.org/account/avatar/00/10/f0/0d/830b7841.jpg"/>
<div class="info">
<div class="hd"><span class="username">Gavin</span>
</div>
<div class="bd">tab的切换什么时候可以像xshell一样使用alt+数字键进行切换 <br/></div>
<span class="time">2018-10-30 07:02</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>